<template>
  <view class="page-navbar">
    <wd-navbar
      v-if="!attrs.hide"
      :title="attrs.title"
      :leftArrow="!isTabbarPage"
      :bordered="attrs.bordered"
      fixed
      :placeholder="attrs.placeholder"
      safeAreaInsetTop
      :customClass="attrs.customClass"
      :customStyle="attrs.customStyle"
      @click-left="onBack"
    >
      <!-- <template v-for="(slot, name) in $slots" #[name]="scope">
        <slot :name="name" v-bind="scope"></slot>
      </template> -->
    </wd-navbar>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { tabBarList } from '@/components/page-tabbar/tabbar-list.js'

const props = defineProps({
  /**
   * navbar配置
   * @param {Boolean} hide 是否关闭navbar，默认false
   * @param {String} title 标题，默认页面标题
   * @param {Boolean} bordered 是否显示边框，默认true
   * @param {Boolean} placeholder 是否显示占位，默认true
   * @param {String} customClass 自定义class，默认'navbar-transparent navbar-blureffect'
   * @param {String} customStyle 自定义样式，默认空
   */
  navbar: {
    type: Object,
    default: () => {}
  }
})

const attrs = computed(() => {
  // 合并配置项
  return Object.assign(
    {
      title: pageTitle.value,
      bordered: true,
      placeholder: true,
      customClass: 'navbar-transparent navbar-blureffect',
      customStyle: ''
    },
    props.navbar
  )
})

const pages = getCurrentPages()
const curPage = pages[pages.length - 1]

const pageTitle = computed(() => {
  let title = '标题'
  // #ifndef MP-WEIXIN
  title = curPage.$page.meta.navigationBar.titleText
  // #endif
  // #ifdef MP-WEIXIN
  title = __wxConfig.page[curPage.route + '.html'].window.navigationBarTitleText
  // #endif
  return title
})
const pagePath = computed(() => {
  let path = '/'
  // #ifndef MP-WEIXIN
  path = curPage.$page.path
  // #endif
  // #ifdef MP-WEIXIN
  path = '/' + curPage.route
  // #endif
  return path
})

const isTabbarPage = computed(() => {
  const tabIndex = tabBarList.findIndex((item) => item.pagePath === pagePath.value)
  return tabIndex !== -1
})

function onBack() {
  uni.navigateBack()
}
</script>

<script>
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: 'shared'
  }
}
</script>

<style lang="scss">
.page-navbar {
  :deep(.navbar-transparent) {
    background: transparent !important;
  }
  :deep(.navbar-blureffect) {
    backdrop-filter: blur(30rpx) brightness(96%);
  }
}
</style>
